<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>最简单的轮播广告</title>
    <style>
        body,
        div,
        ul,
        li {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style-type: none;
        }

        body {
            background: #ccc;
            text-align: center;
            font: 12px/20px Arial;
        }

        #box {
            position: relative;
            width: 492px;
            height: 172px;
            background: #fff;
            border-radius: 5px;
            border: 8px solid #fff;
            margin: 10px auto;
        }

        #box .list {
            position: relative;
            width: 490px;
            height: 170px;
            overflow: hidden;
            border: 1px solid #ccc;
        }

        #box .list li {
            position: absolute;
            top: 0;
            left: 0;
            width: 490px;
            height: 170px;
            opacity: 0;
            transition: opacity 0.5s linear
        }

        #box .list li.current {
            opacity: 1;
        }

        #box .count {
            position: absolute;
            right: 0;
            bottom: 5px;
        }

        #box .count li {
            color: #fff;
            float: left;
            width: 20px;
            height: 20px;
            cursor: pointer;
            margin-right: 5px;
            overflow: hidden;
            background: #F90;
            opacity: 0.7;
            border-radius: 20px;
        }

        #box .count li.current {
            color: #fff;
            opacity: 0.7;
            font-weight: 700;
            background: #f60
        }
    </style>
</head>

<body>
    <div id="box">
        <ul class="list">
            <li style="opacity: 1;"><img src="imgs/p1.jpg" width="490" height="170"></li>
            <li style="opacity: 0;"><img src="imgs/p5.jpg" width="490" height="170"></li>
            <li style="opacity: 0;"><img src="imgs/p3.jpg" width="490" height="170"></li>
            <li style="opacity: 0;"><img src="imgs/p4.jpg" width="490" height="170"></li>
            <li style="opacity: 0;"><img src="imgs/p5.jpg" width="490" height="170"></li>
        </ul>
        <ul class="count">
            <li class="current">1</li>
            <li class="">2</li>
            <li class="">3</li>
            <li class="">4</li>
            <li class="">5</li>
        </ul>
    </div>
    <script>
        // 打开页面  自动轮播 


        // 比如移入图片停止轮播 


        // 鼠标移出图片 开始轮播 

        // 点击按钮 指定的图片显示  停止轮播

        // 移出按钮  从下一张自动轮播

        // <   >      点击按钮 上一张 下一张  停止轮播 

        // 获取元素  
        var imgele = document.querySelector('#box > .list');
        var btnele = document.querySelector('#box > .count');

        var index = 0; //下标的初始值
        var play; // 存放第几个定时器  
        // 自动播放  
        function show(num) {
            // 让所有的图片隐藏 按钮不高亮
            for (var i = 0; i < imgele.children.length; i++) {

                imgele.children[i].style.opacity = 0;
                btnele.children[i].classList.remove('current');

            }

            //到谁 让谁显示   高亮 
            imgele.children[num].style.opacity = 1;
            btnele.children[num].classList.add('current');

        }

        function autoplay() {
            play = setInterval(function () {
                index++; // 下一张 
                if (index >= imgele.children.length) { //防止越界  当大于等于图片的数量 
                    //强制从第一张开始 
                    index = 0;
                }
                show(index); // 将index作为实参传给  show  指定显示哪一页 
            }, 1000);
        }


        autoplay();

    [...btnele.children].forEach(function(item,myindex){
        item.onmouseover = function(){
            
            show(myindex);
            clearInterval(play);
            index = myindex ;// 轮播图片通过index 实现切换 
            // myindex 时当移入按钮的下标  
            // myindex 给到  index  才会自动下一张  
        }
    });

    // 绑定事件 
    imgele.onmouseover = function(){
        clearInterval(play);
    } 


    imgele.onmouseout = function(){
        autoplay();
    }


    // 定时器

    // 修改元素的样式  




    </script>
</body>

</html>